<template>
    <div class="device-data page-container">
        <!-- 筛选项 -->
        <div class="screening">
            <el-row class="device-data_row device-data_row--filter" type="flex">
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.apptype"
                           placeholder="品类">
                    <el-option
                            v-for="{ value, label } in categorySelect"
                            :key="value"
                            :label="label"
                            :value="value">
                    </el-option>
                </el-select>
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.sn8" placeholder="型号">
                    <el-option
                            v-for="item in sN8List"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select class="filter-item" @change="_provinceChange" clearable filterable
                           v-model="paramsDft.province_name"
                           placeholder="省">
                    <el-option
                            v-for="item in provinceList"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.city_name" placeholder="市">
                    <el-option
                            v-for="item in cityListByProvince"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <!--<el-select class="filter-item" disabled filterable v-model="paramsDft.apptype" placeholder="对比">-->
                <!--<el-option-->
                <!--v-for="{ value, label } in categorySelect"-->
                <!--:key="value"-->
                <!--:label="label"-->
                <!--:value="value">-->
                <!--</el-option>-->
                <!--</el-select>-->
            </el-row>
            <el-row class="device-data_row device-data_row--filter">
                <el-radio-group @change="timeRadioChange" v-model="paramsDft.timeType">
                    <el-radio label="1" border>当天</el-radio>
                    <el-radio label="2" border>近7天</el-radio>
                    <el-radio label="3" border>近30天</el-radio>
                    <el-radio label="4" border>自定义</el-radio>
                </el-radio-group>
                <el-date-picker
                        style="margin-left: 15px"
                        v-if="paramsDft.timeType == '4'"
                        class="filter-item"
                        v-model="paramsDft.dateRange"
                        type="daterange"
                        @change="dataPickerChange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-row>
        </div>
        <!-- 核心指标 -->
        <div class="core-index" v-loading="modeLoading.coreIndexLoading">
            <core-index :coreIndexData="coreIndexData"></core-index>
        </div>
        <!-- 设备激活率/设备活跃率 -->
        <div class="device-activation" v-loading="modeLoading.deviceActivationloading">
            <device-activation name="设备激活率/设备活跃率曲线图" :averageTime="false" :averageTimeData="averageTimeData"
                               :deviceChartData="deviceActivationData"
            >
                <div slot="timeSelect">
                    <time-select
                            keyNmae="deviceActivation"
                            :value="timeSelectMap._getDeviceRegistActiveRate"
                            :valuedefault="['日','月']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </device-activation>
        </div>
        <!-- 绑定设备数/活跃设备数 -->
        <div class="device-bind" v-loading="modeLoading.deviceRegistActiveLoading">
            <device-bind :deviceRegistActiveData="deviceRegistActiveData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="deviceRegistActive"
                            :value="timeSelectMap._getDeviceRegistActive"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </device-bind>
        </div>
        <!-- 功能使用数据 -->
        <div class="function-use" v-loading="modeLoading.functionUserLoading">
            <function-use :functionUserData="functionUserData"></function-use>
        </div>
        <!-- 功能柱状图 -->
        <div class="function-bar-chart" v-loading="modeLoading.functionBarChartLoading">
            <function-bar-chart name="功能柱状图" :barChartData="functionBarChartData">
                <!--<div slot="timeSelect">-->
                    <!--<time-select-->
                            <!--keyNmae="functionBarChart"-->
                            <!--:value="timeSelectMap._getDeviceModeData"-->
                            <!--:valuedefault="['日','月','年']"-->
                            <!--:timeChange="timeSelectChange"></time-select>-->
                <!--</div>-->
            </function-bar-chart>
        </div>
        <!-- 菜单柱状图 -->
        <div class="menu-bar-chart" v-loading="modeLoading.menuBarChartLoading">
            <function-bar-chart name="菜单柱状图" :barChartData="menuBarChartData">
                <!--<div slot="timeSelect">-->
                    <!--<time-select-->
                            <!--keyNmae="menuBarChart"-->
                            <!--:value="timeSelectMap._getDeviceMenuData"-->
                            <!--:valuedefault="['日','月','年']"-->
                            <!--:timeChange="timeSelectChange"></time-select>-->
                <!--</div>-->
            </function-bar-chart>
        </div>
        <!-- 使用时间点 -->
        <div class="time-point-of-use" v-loading="modeLoading.timePointLoading">
            <device-activation name="使用时间点" :averageTime="false" :averageTimeData="averageTimeData"
                               :deviceChartData="timePointData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="timePoint"
                            :value="timeSelectMap._getDeviceWorkTimeData"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
                <div slot="content" style="margin-top: 15px" class="device-data_row device-data_row--filter">
                    <el-select class="filter-item" filterable @change="modeNameChange" v-model="paramsDft.mode_name"
                               placeholder="模式">
                        <el-option
                                v-for="(item,index) in modeNameList"
                                :key="'modeName' + index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
            </device-activation>
        </div>
        <!-- 平均工作时长 -->
        <div class="time-point-of-use" v-loading="modeLoading.averageTimeLoading">
            <AverageTime name="平均工作时长" :averageTime="true" :averageTimeData="averageTimeData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="averageTime"
                            :value="timeSelectMap._getAverageModeUseDuration"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
                <div slot="content" style="margin-top: 15px" class="device-data_row device-data_row--filter">
                    <el-select class="filter-item" filterable @change="modeNameChangeAverage"
                               v-model="paramsDft.mode_name_average" placeholder="模式">
                        <el-option
                                v-for="(item,index) in modeNameList"
                                :key="'modeName' + index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
            </AverageTime>
        </div>
        <!-- 功能比例/时间比例/重量比例/活力比例 -->
        <div class="proportion-of-4">
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12" v-loading="modeLoading.proportionLoading">
                    <proportion-of-4 name="功能比例" :percentChartData="modePercentData"></proportion-of-4>
                </el-col>
                <el-col :span="12" v-loading="modeLoading.workTimeDataLoading">
                    <proportion-of-4 name="时间比例" :percentChartData=workTimeData>
                        <div slot="content" style="margin-top: 15px" class="device-data_row device-data_row--filter">
                            <el-select class="filter-item" filterable @change="modeNameChangeWorkTime"
                                       v-model="paramsDft.mode_name_workTime" placeholder="模式">
                                <el-option
                                        v-for="(item,index) in modeNameList"
                                        :key="'modeName' + index"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </div>
                    </proportion-of-4>
                </el-col>
            </el-row>
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12" v-loading="modeLoading.weightPercentDataloading">
                    <proportion-of-4 name="重量比例" :percentChartData="weightPercentData">
                        <div slot="content" style="margin-top: 15px" class="device-data_row device-data_row--filter">
                            <el-select class="filter-item" filterable @change="modeNameChangeWeightPercent"
                                       v-model="paramsDft.mode_name_weightPercent" placeholder="菜单">
                                <el-option
                                        v-for="(item,index) in menuList"
                                        :key="'modeName' + index"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </div>
                    </proportion-of-4>
                </el-col>
                <el-col :span="12" v-loading="modeLoading.powerPercentDataLoading">
                    <proportion-of-4 name="火力比例" :percentChartData="powerPercentData"></proportion-of-4>
                </el-col>
            </el-row>
        </div>
        <!-- 设备SNB -->
        <div class="device-snb">
            <!--<device-snb :sN8List="sN8List">-->
                <!--<div slot="content" style="margin-top: 15px" class="device-data_row device-data_row&#45;&#45;filter">-->
                    <!--<el-select class="filter-item" filterable v-model="sN8model_type" placeholder="型号">-->
                        <!--<el-option-->
                                <!--v-for="item in sN8List"-->
                                <!--:key="item"-->
                                <!--:label="item"-->
                                <!--:value="item">-->
                        <!--</el-option>-->
                    <!--</el-select>-->
                <!--</div>-->
            <!--</device-snb>-->
        </div>
    </div>

</template>

<script>
import commonMixin from '@/mixins/common'
import { categorySelect } from '@/utils/consts'
import CoreIndex from './core-index'
import DeviceActivation from './device-activation'
import AverageTime from './average-time'
import DeviceBind from './device-bind'
import FunctionUse from './function-use'
import FunctionBarChart from './function-bar-chart'
import ProportionOf4 from './proportion-of-4'
import DeviceSnb from './device-snb'
import TimeSelect from './component/timeSelect'
import moment from 'moment'

export default {
  components: {
    CoreIndex,
    DeviceActivation,
    DeviceBind,
    FunctionUse,
    FunctionBarChart,
    ProportionOf4,
    DeviceSnb,
    AverageTime,
    TimeSelect
  },
  mixins: [commonMixin],
  created () {
  },
  data () {
    return {
      sN8model_type: '',
      categoryValue: '',
      categorySelect: categorySelect, // 品类
      provinceList: [],
      cityListByProvince: [],
      sN8List: [],
      menuList: [],
      modeNameList: [],
      timeSelectMap: {
        '_getDeviceRegistActiveRate': 'day', // 获取 激活率/设备活跃率曲线图
        '_getDeviceRegistActive': 'day', // 绑定设备数/活跃设备数曲线几趋势图
        '_getDeviceModeData': 'day', // 功能使用数据柱状图
        '_getDeviceMenuData': 'day', // 菜单使用数据数据柱状图
        '_getDeviceWorkTimeData': 'day', // 运作时间使用数据
        '_getAverageModeUseDuration': 'day'// 平均工作时长
      },
      paramsDft: {
        timeType: '2',
        dateRange: '',
        sn8: '', // 型号
        mode_name: '', // 模式
        mode_name_average: '微波', // 模式 平均时间
        mode_name_workTime: '', // 模式 时间比例
        mode_name_weightPercent: '烤鸡翅', // 菜单 重量比例
        province_name: '', // 省份
        city_name: '', // 城市
        apptype: '', // 品类
        start_day: moment().add('-7', 'days').format('YYYY-MM-DD'), // 开始日期
        end_day: moment(new Date()).format('YYYY-MM-DD')// 结束日期
      },
      modeLoading: {
        coreIndexLoading: false,
        deviceActivationloading: false,
        deviceRegistActiveLoading: false,
        functionUserLoading: false,
        functionBarChartLoading: false,
        menuBarChartLoading: false,
        timePointLoading: false,
        averageTimeLoading: false,
        proportionLoading: false,
        workTimeDataLoading: false,
        weightPercentDataloading: false,
        powerPercentDataLoading: false
      },
      coreIndexData: {}, // 核心数据
      deviceActivationData: [], // 设备激活率/设备活跃率曲线图
      deviceRegistActiveData: {}, // 绑定设备数/活跃设备数曲线及趋势图
      functionUserData: {}, // 功能使用数据
      functionBarChartData: [], // 功能柱状图
      menuBarChartData: [], // 菜单柱状图
      timePointData: [], // 使用时间点
      averageTimeData: [], // 使用时间点,平均使用时间
      modePercentData: [], // 功能比例
      powerPercentData: [], // 火力比例
      weightPercentData: [], // 重量比例
      workTimeData: []// 时间比例

    }
  },
  mounted () {
    // 获取省份
    this._getProvinceList()
    // 获取sn8
    this._getSN8List()
    // 获取菜单
    this._getMenuList()
    // 初始化页面
    this._initPage(true)
  },
  methods: {
    /**
             * 初始化页面
             * @returns {Promise<void>}
             * @private
             */
    _initPage (first) {
      // 获取模式
      this._getModeNameList()
    },
    _initPageComponents () {
      // 核心指标
      this._getDeviceCoreData()
      // 获取 激活率/设备活跃率曲线图
      this._getDeviceRegistActiveRate()
      // 绑定设备数/活跃设备数曲线几趋势图
      this._getDeviceRegistActive()
      // 功能使用数据柱状图
      this._getDeviceModeData()
      // 菜单使用数据柱状图 没有数据
      this._getDeviceMenuData()
      // 运作时间使用数据
      this._getDeviceWorkTimeData()
      // 功能比例
      this._getDeviceModePercent()
      // 火力比例
      this._getDevicePowerPercent()
      // 重量比例 缺乏时间比例
      this._getDeviceWeightPercent()
      // 时间比例
      this._getDeviceWorkTimePercent()
      // 平均工作时长/秒
      this._getAverageModeUseDuration()
    },
    paramsFilter (paramsArr) {
      let params = {}
      this._.each(paramsArr, (item) => {
        if (this.paramsDft[item]) {
          params[item] = this.paramsDft[item]
        }
      })
      return params
    },
    /**
             * 筛选项更改
             * @returns {Promise<void>}
             * @private
             */
    screeningChange () {
      this._initPage()
    },
    /**
             * 时间单选项
             * @returns {Promise<void>}
             * @private
             */
    timeRadioChange () {
      let timeMap = {
        // 当日
        'time-1': {
          start_day: moment(new Date()).format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        },
        // 近7天
        'time-2': {
          start_day: moment().add('-7', 'days').format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        },
        // 近30天
        'time-3': {
          start_day: moment().add('-30', 'days').format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        }
      }
      this.paramsDft.start_day = timeMap['time-' + this.paramsDft.timeType].start_day
      this.paramsDft.end_day = timeMap['time-' + this.paramsDft.timeType].end_day
      this.screeningChange()
    },
    dataPickerChange (time) {
      if (this.paramsDft.timeType === '4') {
        this.paramsDft.start_day = time[0]
        this.paramsDft.end_day = time[1]
        this.screeningChange()
      }
    },
    timeSelectChange (type, timeType) {
      // 可以进行日/月/年筛选的
      let getFucntionType = {
        deviceActivation: '_getDeviceRegistActiveRate',
        deviceRegistActive: '_getDeviceRegistActive',
        functionBarChart: '_getDeviceModeData',
        menuBarChart: '_getDeviceMenuData',
        timePoint: '_getDeviceWorkTimeData',
        averageTime: '_getAverageModeUseDuration'
      }
      if (getFucntionType[type]) {
        this.timeSelectMap[getFucntionType[type]] = timeType
        this[getFucntionType[type]]()
      }
    },
    /**
             * 获取省份
             * @returns {Promise<void>}
             * @private
             */
    async _getProvinceList () {
      let { data: res } = await this.$http.get(this.getApiUrl('dataanalysis/common/getProvinceList', false))
      if (res.code === 0) {
        this.provinceList = res.data
      }
    },
    _provinceChange (e) {
      if (e) {
        this._initPage()
        this._getCityListByProvince(e)
      }
    },
    /**
             * 获取市
             * @returns {Promise<void>}
             * @private
             */
    async _getCityListByProvince (city) {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getCityListByProvince?province_name=${city}`, false))
      if (res.code === 0) {
        this.cityListByProvince = res.data
      }
    },
    /**
             * 获取sn8
             * @returns {Promise<void>}
             * @private
             */
    async _getSN8List () {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getSN8List`, false))
      if (res.code === 0) {
        this.sN8List = res.data
      }
    },
    /**
       * 获取菜单
       * @returns {Promise<void>}
       * @private
       */
    async _getMenuList () {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`/dataanalysis/common/getMenuList`, false))
      if (res.code === 0) {
        this.menuList = res.data
      }
    },
    /**
       * 获取模式
       * @returns {Promise<void>}
       * @private
       */
    async _getModeNameList () {
      let paramsArr = ['apptype']
      let params = this.paramsFilter(paramsArr)
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getModeNameList`, false), { params: params })
      if (res.code === 0) {
        this.modeNameList = res.data
        this._initPageComponents()
        // this.paramsDft.mode_name = res.data[0]
        // 平均工作时长/秒
        // this._getAverageModeUseDuration()
      }
    },
    /**
             * 获取核心指标数据
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceCoreData () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.coreIndexLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceCoreData`, false), {
        params: params
      })
      if (res.code === 0) {
        this._getDeviceModeMenuWorkDetail(res.data)
        // fix // 激活率、设备活跃率、最常用功能、最常使用菜单、活跃情况
      }
      this.modeLoading.coreIndexLoading = false
    },
    /**
             * 获取核心指标数据 激活率、设备活跃率、最常用功能、最常使用菜单、活跃情况
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceModeMenuWorkDetail (deviceCoreData) {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.functionUserLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceModeMenuWorkDetail`,
        false), { params: params })
      if (res.code === 0) {
        this.coreIndexData = Object.assign(deviceCoreData, res.data)
        let _functionUser = {
          menu: {},
          mode: {},
          workTime: {}
        }
        this.functionUserData = Object.assign(_functionUser, res.data)
      }
      this.modeLoading.functionUserLoading = false
    },
    /**
             * 获取 激活率/设备活跃率曲线图
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceRegistActiveRate () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getDeviceRegistActiveRate
      this.modeLoading.deviceActivationloading = true

      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceRegistActiveRate`,
        false), { params: params })
      if (res.code === 0) {
        this.deviceActivationData = [res.data]
      }
      this.modeLoading.deviceActivationloading = false
    },
    /**
             * 获取 绑定设备数/活跃设备数曲线几趋势图
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceRegistActive () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getDeviceRegistActive
      this.modeLoading.deviceRegistActiveLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceRegistActive`,
        false), { params: params })
      if (res.code === 0) {
        this.deviceRegistActiveData = res.data
      }
      this.modeLoading.deviceRegistActiveLoading = false
    },
    /**
             * 获取 功能使用数据柱状图
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceModeData () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getDeviceModeData
      this.modeLoading.functionBarChartLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceModeData`, false),
        { params: params })
      if (res.code === 0) {
        this.functionBarChartData = res.data ? res.data.modeList : []
      }
      this.modeLoading.functionBarChartLoading = false
    },
    /**
             * 获取 菜单使用数据数据柱状图
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceMenuData () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getDeviceMenuData
      this.modeLoading.menuBarChartLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceMenuData`, false),
        { params: params })
      if (res.code === 0) {
        this.menuBarChartData = res.data ? res.data.menuList : []
      }
      this.modeLoading.menuBarChartLoading = false
    },
    /**
             * 获取 运作时间使用数据_getDeviceWorkTimeData
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceWorkTimeData () {
      let paramsArr = ['province_name', 'mode_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getDeviceWorkTimeData
      this.modeLoading.timePointLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceWorkTimeData`,
        false), { params: params })
      if (res.code === 0) {
        this.timePointData = res.data ? res.data.modeResult : []
      }
      this.modeLoading.timePointLoading = false
    },
    modeNameChange (e) {
      this.paramsDft.mode_name = e
      this._getDeviceWorkTimeData()
    },
    modeNameChangeAverage (e) {
      this.paramsDft.mode_name_average = e
      this._getAverageModeUseDuration()
    },

    /**
             * 获取 运作时间使用数据_getDeviceWorkTimeData
             * @returns {Promise<void>}
             * @private
             */
    async _getAverageModeUseDuration () {
      let paramsArr = ['province_name', 'mode_name_average', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getAverageModeUseDuration
      params.mode_name = params.mode_name_average
      if (params.mode_name_average) {
        delete params.mode_name_average
      }
      this.modeLoading.averageTimeLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getAverageModeUseDuration`,
        false), { params: params })
      if (res.code === 0) {
        this.averageTimeData = res.data.average_mode_use_duration
      }
      this.modeLoading.averageTimeLoading = false
    },
    /**
             * 获取 功能比例
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceModePercent () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.proportionLoading = true
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceModePercent`, false), { params: params })
      if (res.code === 0) {
        this.modePercentData = res.data ? res.data.runModeList : []
      }
      this.modeLoading.proportionLoading = false
    },
    /**
             * 获取 火力比例
             * @returns {Promise<void>}
             * @private
             */
    async _getDevicePowerPercent () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.powerPercentDataLoading = true
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDevicePowerPercent`, false), { params: params })
      if (res.code === 0) {
        this.powerPercentData = res.data ? res.data.powerList : []
      }
      this.modeLoading.powerPercentDataLoading = false
    },
    modeNameChangeWeightPercent (e) {
      this.paramsDft.mode_name_weightPercent = e
      this._getDeviceWeightPercent()
    },
    /**
             * 获取 重量比例
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceWeightPercent () {
      let paramsArr = ['province_name', 'mode_name_weightPercent', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.mode_name = params.mode_name_weightPercent
      if (params.mode_name_weightPercent) {
        delete params.mode_name_weightPercent
      }
      this.modeLoading.weightPercentDataloading = true
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceWeightPercent`, false), { params: params })
      if (res.code === 0) {
        this.weightPercentData = res.data ? res.data.weightList : []
      }
      this.modeLoading.weightPercentDataloading = false
    },
    modeNameChangeWorkTime (e) {
      this.paramsDft.mode_name_workTime = e
      this._getDeviceWorkTimePercent()
    },
    /**
             * 获取 时间比例oChart1
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceWorkTimePercent () {
      let paramsArr = ['province_name', 'mode_name_workTime', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.mode_name = params.mode_name_workTime
      if (params.mode_name_workTime) {
        delete params.mode_name_workTime
      }
      this.modeLoading.workTimeDataLoading = true
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceWorkTimePercent`, false), { params: params })
      if (res.code === 0) {
        this.workTimeData = res.data ? res.data.mode_use_ratio : []
      }
      this.modeLoading.workTimeDataLoading = false
    }

  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-content {
        background-color: #ffffff;
        margin-top: 20px;
        padding: 20px;
        border-radius: 5px;
        .title {
            .span-1 {
                font-size: 18px;
                color: #001737;
            }
            .span-2, .span-3 {
                font-size: 14px;
                color: #001737;
                margin-left: 10px;
            }
        }
    }
    .device-data_row {
        & ~ .device-data_row {
            margin-top: $gap-big;
        }
        .box-card {
            & + .box-card {
                margin-top: 0;
                margin-left: $gap-default;
            }
            .title {
                font-weight: bolder;
                font-size: 145%;
            }
        }
    }
    .device-data_row--filter {
        .filter-item {
            ::v-deep .el-input {
                @include el-input__grey;
            }
            &.el-date-editor {
                ::v-deep {
                    @include el-date-editor__grey;
                }
            }
            &:not(.el-date-editor) {
                width: 8em;
            }
            & ~ .filter-item {
                margin-left: $gap-default;
            }
        }
        .el-checkbox, .el-radio {
            margin-right: 0;
            @include el-date-editor__grey
        }
    }
    .device-data_row--survey {
        .box-card {
            .radio_data-range {
                ::v-deep .el-radio-button {
                    & ~ .el-radio-button {
                        margin-left: $gap-default;
                    }
                    .el-radio-button__inner {
                        border: none;
                    }
                    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                        color: $input-font-color;
                        background-color: $input-background-color;
                        box-shadow: none;
                    }
                }
            }
            .card-content {
                .data-item {
                    flex: auto;
                    &:not(:last-of-type) {
                        padding-right: 30px;
                    }
                    & ~ .data-item {
                        padding-left: 30px;
                        border-left: 1px solid $--border-color-base;
                    }
                    .item-row {
                        & ~ .item-row {
                            margin-top: $gap-small;
                        }
                    }
                    .num {
                        font-size: 150%;
                        font-weight: bolder;
                        color: $--color-primary;
                    }
                    .label {
                        font-size: 95%;
                        color: $--color-info;
                    }
                    .trend {
                        font-weight: bold;
                        .range {
                            font-weight: normal;
                            color: $--color-primary-light-1;
                        }
                    }
                }
            }
        }
    }
    .device-data_row--stage-trend {
    }
    .device-data_row--ratio {
        .box-card {
            flex: 1 1 50%;
        }
    }
    .device-data_row--retention {
        .index-btn-group {
            ::v-deep {
                .label {
                    @include style__grey;
                }

                .el-date-editor {
                    @include el-date-editor__grey;
                }
            }
        }
    }
</style>
